{% extends "SLBackBundle::layout.html.twig" %}

	{% block title %}{{ parent() }} - Projets - Index {% endblock %}
	
	{% block body %}

<script type="text/javascript">

var baselink = "{{ path('sl_back_projet_index') }}";
var frontlink = "{{ path('sl_front_homepage') }}";
var modif = false;

function makeProject(names)
{
  var names = names.split(' ');
  var count = names.length;

  function constructor()
  {
	for (var i = 0; i < count; i++)
	{
		this[names[i]] = arguments[i];
	}
  }
  return constructor;
}

var Item = makeProject("id name url position ligne");

var listOfProjet = [{% for projet in projets %} new Item({{ projet.id }}, "{{ projet.name|title }}", "{{ projet.url }}", {{ projet.position }}, {{ projet.ligne }} ) {% if loop.last == false %} , {% endif %} {% endfor %} ];

function		getProjetId(id, change)
{
	var			ret = -1;
	
	for (var i = 0; i < listOfProjet.length; i++)
	{
		if ((change == "up" && listOfProjet[i].ligne == listOfProjet[id].ligne && listOfProjet[i].position < listOfProjet[id].position && (ret == -1 || listOfProjet[i].position > listOfProjet[ret].position)) ||
			(change == "down" && listOfProjet[i].ligne == listOfProjet[id].ligne && listOfProjet[i].position > listOfProjet[id].position && (ret == -1 || listOfProjet[i].position < listOfProjet[ret].position)))
			ret = i;
	}
	
	return (ret);
}

function		getContentOfList(ligne)
{
	var count = 0;
	var content = "";
	
	for (var i = 0; i < listOfProjet.length; i++)
	{
		if (listOfProjet[i].ligne == ligne)
			count++;
	}
	
	var pos = 1;
	for (var i = 0; i < count; i++)
	{
		var j;
		var select = -1;
		while (select == -1 && pos < 5000)
		{
			for (j = 0; j < listOfProjet.length && select == -1; j++)
			{
				if (listOfProjet[j].ligne == ligne && listOfProjet[j].position == pos)
					select = j;
			}
			pos++;
		}
		
		if (select != -1)
		{
			content += "<option value=\"" + select + "\" ><img href=\"" +listOfProjet[select].img+"\" /><br /><i>" + listOfProjet[select].name + "</i></option>";
		}
	}
	
	return content;
}

function getLastPositionOfList(listnum)
{
	var  last = -1;
	
	for (var i = 0; i < listOfProjet.length; i++)
	{
		if (listOfProjet[i].ligne == listnum && (last == -1 || listOfProjet[last].position < listOfProjet[i].position))
			last = i;
	}
	
	if (last == -1)
		return (1);
	else
		return (listOfProjet[last].position + 1);
}

function newfocus()
{
	if (document.getElementById("liste1").options.selectedIndex != -1)
		document.getElementById("liste1").options[document.getElementById("liste1").options.selectedIndex].selected=false;

	if (document.getElementById("liste2").options.selectedIndex != -1)
		document.getElementById("liste2").options[document.getElementById("liste2").options.selectedIndex].selected=false;
		
	if (document.getElementById("liste3").options.selectedIndex != -1)
		document.getElementById("liste3").options[document.getElementById("liste3").options.selectedIndex].selected=false;
		
	if (document.getElementById("liste4").options.selectedIndex != -1)
		document.getElementById("liste4").options[document.getElementById("liste4").options.selectedIndex].selected=false;
}

function up()
{
	modif = true;
	
	var list;
	var lid;

	if (document.getElementById("liste1").options.selectedIndex != -1)
		liste = document.getElementById("liste1");
	else if (document.getElementById("liste2").options.selectedIndex != -1)
		liste = document.getElementById("liste2");
	else if (document.getElementById("liste3").options.selectedIndex != -1)
		liste = document.getElementById("liste3");
	else if (document.getElementById("liste4").options.selectedIndex != -1)
		liste = document.getElementById("liste4");
	else
		return;
	
	var selected = liste.options.selectedIndex;
	var id = parseInt(liste.options[selected].value);
	if (selected > 0)
	{
		var oldId = getProjetId(id, "up");
		var oldPosition = listOfProjet[id].position;
		listOfProjet[id].position = listOfProjet[oldId].position;
		listOfProjet[oldId].position = oldPosition;
	
		var oldOption = new Option(liste.options[selected - 1].text, liste.options[selected - 1].value, false, false);
		liste.options[selected - 1] = new Option(liste.options[selected].text, liste.options[selected].value, false, true);
		liste.options[selected] = oldOption;
	}
}

function down()
{
	modif = true;
	
	var list;
	var lid;

	if (document.getElementById("liste1").options.selectedIndex != -1)
		liste = document.getElementById("liste1");
	else if (document.getElementById("liste2").options.selectedIndex != -1)
		liste = document.getElementById("liste2");
	else if (document.getElementById("liste3").options.selectedIndex != -1)
		liste = document.getElementById("liste3");
	else if (document.getElementById("liste4").options.selectedIndex != -1)
		liste = document.getElementById("liste4");
	else
		return;
	
	var selected = liste.options.selectedIndex;
	var id = parseInt(liste.options[selected].value);
	if (selected < liste.options.length - 1)
	{
		var oldId = getProjetId(id, "down");
		var oldPosition = listOfProjet[id].position;
		listOfProjet[id].position = listOfProjet[oldId].position;
		listOfProjet[oldId].position = oldPosition;
	
		oldOption = new Option(liste.options[selected + 1].text, liste.options[selected + 1].value, false, false);
		liste.options[selected + 1] = new Option(liste.options[selected].text, liste.options[selected].value, false, true);
		liste.options[selected] = oldOption;
	}
}

function deleteOption(liste, selected)
{
	for (i = selected; i < liste.options.length - 1; i++)
	{
		liste.options[i] = new Option(liste.options[i + 1].text, liste.options[i + 1].value, false, false);
	}
	liste.options.length--;
}

function addOption(liste, newOption)
{
	liste.options.length++;
	liste.options[liste.options.length - 1] = newOption;
}

function right()
{
	modif = true;
	
	var liste, newliste;
	
	if (document.getElementById("liste1").options.selectedIndex != -1)
	{
		liste = document.getElementById("liste1");
		newliste = document.getElementById("liste2");
		newlistenum = 2;
	}
	else if (document.getElementById("liste2").options.selectedIndex != -1)
	{
		liste = document.getElementById("liste2");
		newliste = document.getElementById("liste3");
		newlistenum = 3;
	}
	else if (document.getElementById("liste3").options.selectedIndex != -1)
	{
		liste = document.getElementById("liste3");
		newliste = document.getElementById("liste4");
		newlistenum = 4;
	}
	else
		return;
	
	var selected = liste.options.selectedIndex;
	var id = parseInt(liste.options[selected].value);
	
	listOfProjet[id].position = getLastPositionOfList(newlistenum);
	listOfProjet[id].ligne = newlistenum;	
	
	newOption = new Option(liste.options[selected].text, liste.options[selected].value, false, true);	
	deleteOption(liste, selected);
	addOption(newliste, newOption);
}

function left()
{
	modif = true;
	
	var liste, newliste;
	
	if (document.getElementById("liste2").options.selectedIndex != -1)
	{
		liste = document.getElementById("liste2");
		newliste = document.getElementById("liste1");
		newlistenum = 1;
	}
	else if (document.getElementById("liste3").options.selectedIndex != -1)
	{
		liste = document.getElementById("liste3");
		newliste = document.getElementById("liste2");
		newlistenum = 2;
	}
	else if (document.getElementById("liste4").options.selectedIndex != -1)
	{
		liste = document.getElementById("liste4");
		newliste = document.getElementById("liste3");
		newlistenum = 3;
	}
	else
		return;
	
	var selected = liste.options.selectedIndex;
	var id = parseInt(liste.options[selected].value);
	
	listOfProjet[id].position = getLastPositionOfList(newlistenum);
	listOfProjet[id].ligne = newlistenum;	
	
	newOption = new Option(liste.options[selected].text, liste.options[selected].value, false, true);	
	deleteOption(liste, selected);
	addOption(newliste, newOption);
}

function add()
{
	if (modif == true && confirm("Vous allez quitter cette page sans sauvegarder les données modifiées.\nEtes vous sure ?") == false)
			return ;
	window.location = baselink + "/add";
}

function see()
{
	var liste;

	if (modif == true && confirm("Vous allez quitter cette page sans sauvegarder les données modifiées.\nEtes vous sure ?") == false)
			return ;
	
	if (document.getElementById("liste1").options.selectedIndex != -1)
		liste = document.getElementById("liste1");
	else if (document.getElementById("liste2").options.selectedIndex != -1)
		liste = document.getElementById("liste2");
	else if (document.getElementById("liste3").options.selectedIndex != -1)
		liste = document.getElementById("liste3");
	else if (document.getElementById("liste4").options.selectedIndex != -1)
		liste = document.getElementById("liste4");
	else
		return;
	
	var selected = liste.options.selectedIndex;
	var id = parseInt(liste.options[selected].value);
	
	window.location = frontlink + "projet/" + listOfProjet[id].url;
}

function edit()
{
	var liste;

	if (modif == true && confirm("Vous allez quitter cette page sans sauvegarder les données modifiées\nEtes vous sure ?") == false)
			return ;
	
	if (document.getElementById("liste1").options.selectedIndex != -1)
		liste = document.getElementById("liste1");
	else if (document.getElementById("liste2").options.selectedIndex != -1)
		liste = document.getElementById("liste2");
	else if (document.getElementById("liste3").options.selectedIndex != -1)
		liste = document.getElementById("liste3");
	else if (document.getElementById("liste4").options.selectedIndex != -1)
		liste = document.getElementById("liste4");
	else
		return;
	
	var selected = liste.options.selectedIndex;
	var id = parseInt(liste.options[selected].value);
	
	window.location = baselink + "/edit/" + listOfProjet[id].url;
}

function del()
{
	var liste;

	if (modif == true && confirm("Vous allez quitter cette page sans sauvegarder les données modifiées.\nEtes vous sure ?") == false)
			return ;
	
	if (document.getElementById("liste1").options.selectedIndex != -1)
		liste = document.getElementById("liste1");
	else if (document.getElementById("liste2").options.selectedIndex != -1)
		liste = document.getElementById("liste2");
	else if (document.getElementById("liste3").options.selectedIndex != -1)
		liste = document.getElementById("liste3");
	else if (document.getElementById("liste4").options.selectedIndex != -1)
		liste = document.getElementById("liste4");
	else
		return;
	
	var selected = liste.options.selectedIndex;
	var id = parseInt(liste.options[selected].value);
	
	window.location = baselink + "/delete/" + listOfProjet[id].url;
}

function save()
{
    var form = document.createElement('form');
    form.setAttribute('action', baselink + "/save");
    form.setAttribute('method', 'post');
   
	for (var i = 0; i < listOfProjet.length; i++)
    {
        var inputvar = document.createElement('input');
        inputvar.setAttribute('type', 'hidden');
        inputvar.setAttribute('name', listOfProjet[i].id);
        
		var data = listOfProjet[i].position + "," + listOfProjet[i].ligne;
		inputvar.setAttribute('value', data);
        form.appendChild(inputvar);
    }
    document.body.appendChild(form);
    form.submit();
}

</script>

			<div class="intro">
				<h2>Gestion des projets :</h2><br /><br />
				Utilisez les boutons à gauche pour déplacer un projet d'une liste à l'autre ou interagir avec le projet sélectionné.<br />
				Si vous déplacez des projets, n'oubliez pas de cliquer sur le bouton "Enregistrer les modifications" en bas de la page.<br /><br />
			</div>

			<div class="form">
			<table>
				<tr>
					<td>
						<b>Projets :</b>
					</td>
				</tr>
				<tr>
					<td></td>
					<td>
						Liste n°1
					</td>
					<td>
						Liste n°2
					</td>
					<td>
						Liste n°3
					</td>
					<td>
						Projets non publiés
					</td>
				</tr>
				<tr>
					<td>
						<input type="Button" value="^" onclick="up()" style="width:100px; height:25px;"/><br />
						<input type="Button" value="v" onclick="down()" style="width:100px; height:25px;"/><br />
						<input type="Button" value=">" onclick="right()" style="width:100px; height:25px;"/><br />
						<input type="Button" value="<" onclick="left()" style="width:100px; height:25px;"/><br />
						<input type="Button" value="Voir" onclick="see()" style="width:100px; height:25px;"/><br />
						<input type="Button" value="Editer" onclick="edit()" style="width:100px; height:25px;"/><br />
						<input type="Button" value="Supprimer" onclick="del()" style="width:100px; height:25px;"/><br />
						<input type="Button" value="Ajouter" onclick="add()" style="width:100px; height:25px;"/></a><br />				
					</td>
					<td>
						<select id="liste1" size="15" onfocus="newfocus();"> 
							<script type="text/javascript">
								document.write(getContentOfList(1));
							</script>
						</select>
					</td>
					<td>
						<select id="liste2" size="15" onfocus="newfocus();"> 
							<script type="text/javascript">
								document.write(getContentOfList(2));
							</script>
						</select>
					</td>
					<td>
						<select id="liste3" size="15" onfocus="newfocus();"> 
							<script type="text/javascript">
								document.write(getContentOfList(3));
							</script>
						</select>
					</td>
					<td>
						<select id="liste4" size="15" onfocus="newfocus();"> 
							<script type="text/javascript">
								document.write(getContentOfList(4));
							</script>
						</select>
					</td>
				</tr>
				
			</table>
			</div>
			
			<div class="outro">
				<input type="Button" value="Enregistrer les modifications" onclick="save()" style="width:200px; height:50px;"/></a>
			</div>

{% endblock %}